前幾天都是單純的轉發、修改內容而已比較簡單。今天要開始進入比較難的登入了，這部份因為比較複雜會分成三天，今天這篇講的是 cookie 原理還有登入機制，後面才是實作

cookie 原理

Cookie 就像你去飲料店買飲料時他給你的 號碼牌 ，可以用來識別你的身分

你點珍奶付了錢之後拿到一張號碼牌寫著 170 號，因為前面還有很多人所以你先去附近逛逛，過十分鐘回來只要出示這張 170 號就可以拿到你剛剛買的飲料

當你用瀏覽器登入 Github 時也是這樣，使用帳號密碼登入（付錢）之後，Github 會給瀏覽器 Cookie（號碼牌），Cookie 上會寫著你是誰，你如果要新建 repo 就要出示這張號碼牌，Github 確認你是本人之後就會讓你新建 repo

server 要怎麼給我的瀏覽器 Cookie（號碼牌）

當你使用帳號密碼登入 Github 的時候，Github server 回覆給你的 HTTP Header 裡面會有好幾個 Set-Cookie 的欄位，這就是 server 發給你的號碼牌，你的瀏覽器會自動把這些號碼牌存起來

我的瀏覽器怎麼出示號碼牌

等你下次要新建 repo 的時候，瀏覽器傳出去的 Header 裡面就會有一個 Cookie 欄位，裡面就是你的號碼牌，server 檢查完之後確認你是本人才給你新建 repo

cookie 格式

一個 cookie 通常是一串字串，裡面有一組 key/value，像是 userId=12345678;，除此之外可能還會加上一些屬性，如果想知道你的瀏覽器現在存了哪些 cookie 可以到 Devtool > Application > Storage > Cookies 裡面看

• domain

  像上上圖中某些 cookie 像 dotcom_user=Larry850806; domain=.github.com，代表這個號碼牌只會在網域是 .github.com 或是 Github 的子網域才會發送出去，像是 gist.github.com 之類的，不會把 cookie 發給別的網站譬如說 phish-github.com

• expires

  有些 cookie 會設定過期時間，譬如說 id=a3fWa; Expires=Wed, 21 Oct 2018 07:00:00 GMT，只要超過 2018/10/21 早上七點 瀏覽器就會把這個 cookie 丟掉，常常會用於某些銀行網站你太久沒動他會幫你登出

• http only

  除了收到 Github 回覆時會收到新的 cookie 之外，瀏覽器上的 javascript 也可以新增、讀取 cookie，因此如果你的 Chrome 不小心安裝到惡意的 extension，他就有可能會偷走號碼牌然後拿走你的飲料

  為了避免這種情況可以把 cookie 設為 http only，像是 id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; HttpOnly，這樣 js 就沒辦法存取他

• secure

  前面有說到 cookie 會隨著請求一起發出去，但因為單純的 http 不夠安全，cookie 可能會在路上被劫持，為了安全起見可以幫 cookie 加上 secure 屬性，限制網站一定要是 https 才能把這個 cookie 發出去，像 Github 對 user_session=JpcsM2...; secure 這個 cookie 就有設定 secure，避免有人偷走我的 cookie 然後以我的名義去做壞事

小結

今天用號碼牌講解了 cookie 的原理，希望大家都有看懂，沒問題的話明天就要來分析 Github 登入時 cookie 是怎麼傳的～如果對 cookie 還有什麼疑問的話可以參考 MDN 的 HTTP cookies，或是在下面留言我會盡量幫你解答，謝謝大家